Visité el blog de Markos, y me gustó esa modificación que comentaba. Se trataba de la imagen que aparece en la cabecera de los comentarios que dicho sea de paso yo copié de la plantilla Red White Template
Tenía pendiente crear una entrada explicando como añadir una imagen en la cabecera pero al ver la imagen de Markos una lucecita se encendió en mi cabeza. Pensé que sería una buena idea crear varias imágenes para añadir a los comentarios.
¿Quién podía crear esas imágenes?
!Pues Markos que domina a la perfección el Photoshop¡
Su respuesta no se hizo esperar, las imágenes son geniales:
En conversación con Markos decidimos (mejor dicho, decido) que será Markos quien creará esa entrada y de paso dar a conocer sus imágenes.
Los pasos a seguir son muy sencillos, nos situamos en plantilla Edición de HTML sin necesidad de expandir la plantilla y buscamos:
.comment-author {
A continuación añadimos:
background:transparent url(aquí-URL-de-la-imagen) top no-repeat;
Si ya lo tenemos porque en su día añadimos color en los comentarios lo que haremos será sustituir el color por la url de la imagen.
Nos quedaría algo así:
.comment-author {
background:transparent url(url_de_la_imagen) top no-repeat;
margin:.5em 0 0;
padding:13px 10px 20px 110px;
font-weight:bold;
text-align: center;
color:#000000;
}
Si lo deseamos también podemos darle color los comentarios.
Sonowebs (Generador de audio en las entradas) |
|
▼ |
Sonowebs es una herramienta que proporciona voz a cualquier texto escrito por nosotros, proporcionando la posibilidad de escuchar nuestras entradas además de poder leerlas.
De esta forma si un día la pereza se apodera de nosotros o estamos ocupados con otra actividad podemos seguir escuchando.
Consiste en la creación automática de un archivo de sonido en MP3 para cada noticia. La finalidad de esta herramienta es facilitar el acceso a la gran cantidad de información presente en la blogosfera a las personas con problemas visuales.
La instalación es muy sencilla y no requiere más de cinco minutos, se trata de expandir nuestra plantilla de artilugios, buscar una línea de código que nos indican y añadir a continuación el código que nos proporcionan.
Una vez guardados los cambios todas nuestras entradas estarán dotadas de audio.
Si prefieres dotar de audio alguna entrada en particular sin la necesidad de agregarlo en todas puedes hacerlo llenando un formulario en el que agregaremos nuestra noticia, el título y la dirección de nuestra Web.
Esa opción hará público el audio y será asignada a la nube de categorías incluida en Sonowebs.
Una vez generamos el texto a audio solo tendremos que copiar el código que nos proporciona y pegarlo en el lugar donde deseamos que aparezca.
Ejemplo:
Tutorial de instalación (Aparecerá en toadas las entradas)
Nube de etiquetas (Categorías)
Formulario (Crear un audio para una entrada específica)
Fuente:xyberneticos
Do(X)s ( Plantillas para Blogger) |
|
▼ |
Es fantástico, la cantidad de páginas que vamos conociendo con plantillas para Blogger, y pensar que no hace mucho la palabra variedad sonaba extraña.
Gracias a mi gran amiga Ale, he conocido Do(X)s
Su autora es Ronnie, en su blog podemos encontrar plantillas que pone a disposición de todos.
Su diseño es en mi opinión una mezcla de buen gusto y sencillez, me atrevería a decir que se nota la mano femenina en el diseño.
Elegantes... esa sería la palabra.
Por si fuera poco también nos deleita con estupendos y útiles tutoriales.
Blog del Día |
|
▼ |
Que nuestro blog guste a los visitantes es algo que a todos nos agrada, pero si además de gustar nos nombran como mejor blog del día la satisfacción se multiplica, y es lo que me ha pasado a mi.
Desde Argentina k_nelita con todo el cariño y la mejor de sus sonrisas ha dicho:
"Gem@ BLOG La mejor ayuda que puedes encontrar para hacer un blog o mejorar el que ya tienes"
Y yo quiero agradecérselo mandandole un fuerte abrazo y como no, les invito a conocer Resurgiendo
Seguimiento de comentarios en Blogger |
|
▼ |
¿Se han dado cuenta?
Ya tenemos en Blogger aplicado el sistema de notificación de comentarios.
Cada vez que dejemos un comentario en alguna página y la casilla Email follow-up comments to esté marcada recibiremos en nuestro correo la notificación de respuesta a ese comentario.
Esto se está poniendo bonito
NeoWORX (país visitante en línea) |
|
▼ |
NeoWORX lanza una nueva herramienta NeoPlanet está disponible gratuitamente durante 14 días a partir de ese tiempo para seguir utilizándolo es necesaria la opción Premium que nos costaría la nada despreciable cifra de 13.99€ durante 6 meses o 8.99€ durante 6 meses.
Hay que recocer que la versión Premium tiene un efecto increible, nos muestra a pantalla completa un globo terráqueo en 3D realizado con verdaderas imágenes satélite de la NASA donde podemos navegar alrededor de la Tierra como si lo hiciéramos por el espacio.
Observa NeoPlanet en acción clicando sobre el globo terráqueo del siguiente enlace:
La forma de añadirlo a nuestro blog es muy sencilla, una vez nos registramos y pasamos a la zona miembros tenemos tres diseños para escoger.
Nos proporciona el código y un Quick para instalar directamente en nuestro blog.
Si utilizamos este último luego tendremos que arrastrar la etiqueta donde se encuentra hasta el lugar deseado.
Red White Template |
|
▼ |
Esta es la plantilla a la que hacía referencia en la anterior entrada, es la plantilla 3 columnas Red White Template la podemos encontrar en Jackbook
En mi opinión es una plantilla muy actual, con diseño Web 2.0, un sistema de comentarios poco visto en las actuales plantillas y un buscador agregado en la cabecera del blog.
Aunque el efecto es diferente la imagen de mis comentarios la tomé de esta plantilla. Sin embargo tiene algo que no termina de convencerme, y es la dificultad de encontrar los código en la plantilla.
He comprobado en mi blog de pruebas que el sistema de entradas expandibles es totalmente aplicable, también resulta sencillo modificar el menú y añadir un logo en la cabecera sustituyendo la actual.
Para los que se conformen con la plantilla sin hacer grandes modificaciones no tendrán problema.
Podéis descargarla desde aquí. deberemos abrir el archivo y extraer el archivo 3col-redwhite-template.xml
La forma de añadirla es la siguiente:
Nos situamos en nuestra plantilla Edición de HTML y clicamos en examinar, buscaremos el archivo extraído del zip en nuestro PC y clicamos en Subir.
Podría ser que nos pida eliminar artilugios que teníamos añadidos en la antigua plantilla, para poder instalar la nueva deberemos aceptar la eliminación .
Una vez tenemos la plantilla instalada vamos a agregar el buscador del blog nos situaremos en Plantilla/añadir un elemento de página/HTML Javascript y añadiremos lo siguiente:
<form id="SearchBox" action="http://Your-BLOG-Name.blogspot.com/search" method="get"> <input id="s" maxlength="255" value="looking for something?" name="q" type="text"/> </form>
En esa parte de código sustituimos http://Your-BLOG-Name por http://url–del-blog. Guardamos los cambios y arrastramos la etiqueta hasta el lugar indicado.
Ahora para modificar el menú de nuevo vamos a Plantilla/añadir un elemento de página/HTML Javascript pero en el header del blog (debajo de cabecera) añadiremos:
<ul> <li> <a href="url-de-tu-blog.com/">Home</a> </li> <li class="page_item"> <a href="http://forever@gmail.com/contact-me/" title="Page 1">Contact </a> </li> <li class="page_item"> <a href="url-de-perfil" title="Perfil">About Us</a> </li> <li class="page_item"> <a href="url-del-feed" title="Page 2"> Rss Feed</a> </li></ul>
Sustituiremos el texto y enlaces por lo que deseamos añadir en el menú. Guardamos los cambios y nos vamos a Configuración.
Ahora en Configuración vamos a escoger el Formato de hora lo haremos de la siguiente forma:
Con estos cambios ya tenemos nuestra plantilla preparada para comenzar a postear.
ACTUALIZADO
K_nelita preguntaba la forma de añadir el código al buscador. Yo contestaba a esa pregunta en la entrada diciendo que se añadía con la función Drag and Drop (arrastrar y soltar)
Pues bien... la respuesta no era esa sino que la plantilla que yo me había descargado no traía el elemento de página para añadir el código dentro del buscador sino en la sidebar.
Intentando ayudar a K_anelita y ante la imposibilidad de hacer funcionar el buscador decidí descargar de nuevo la plantilla y esta vez si. Esta vez todo estaba en su lugar y su lugar era el de la siguiente imagen:
Joseca lo que desea es añadir los iconos de Redes Sociales al pie de las entradas, y no encontraba la porción de código para hacerlo. Lo que hay que buscar es:
<p class='post-footer-line post-footer-line-3'/>
El problema consiste que la mayoría de estas plantillas no son originales de Blogger, la mayoría son plantillas de WordPress adaptadas a Blogger y mantienen algunos códigos de WordPress
aunque en Blogger no tengan función.
La solución que yo he dado para aplicar los iconos de las redes sociales es muy casera. Queda a gusto de cada uno añadirlo o no, a su blog.
Nos situamos en Configuración/Formato y buscamos al final donde dice Plantilla de entrada
En ese espacio añadiremos lo siguiente:
<legend>
<center>Agregar a: <a href="http://www.technorati.com/signup/?f=favorites" target="_blank"><img alt="Agregar a Technorati" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGkYEi8g7II9I4KZzzGW6_BIGzcLd8e3iqpsqfLoltpgU_ECdkiNYd0sF0zxRW_sOcqsxRmozEK9XaRoFG54C1JBsD7EL8tLCiIqLRQopKJ6QXtf7ykbgRIYt8cytBL9mdt5O/s1600/technorati.gif" /></a> <a href="http://del.icio.us/post?url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Del.icio.us" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSJBS6Wltp_FZC3TWTHQXsSemQ1ujZWMxYEPE0jwp2liYxNxy-4Z8_Uu7ubXA8BALnZ1fQN9BGoo12iibi5Qt7mqOWDVlwihdaF7-bFDMp_Bv1izwVZBFu-DscAMzoCCx5GCq0/s1600/delicious.gif" /></a> <a href="http://digg.com/submit?phase=2&url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a DiggIt!" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHN_BuyW_TAjivGaGlxgxqIVI3g6fM_CfxxMHUCSYKQJDXzXhAU_O5xvTIwTVZKnxp8-cY9gZ7Bp-y7nrwBvxVNooK6vUQiho5mczqU3W_dbBHJb7Z3S3KSSU9exmjDa19i8Je/s1600/digg.png" /></a> <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Yahoo!" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qlfIOULWf0hz8uNZfxD9BIZ0W9QK7cn-Q9lZpmdKjVi_Rgeuukru3wfCWT9zeZ1wCU5wPw_xy9EJHjtcmZk1Jup40a73BPeSAXnBokay7UiM3JW_fI1DeH9BM-MbJt0tGwdv/s1600/yahoo.png" /></a> <a href="http://www.google.com/bookmarks/mark?op=add&bkmk=http%3A%2F%2Fwww.google.com%2Fsearch%3Fie%3DUTF-8%26oe%3DUTF-8%26sourceid%3Dnavclient%26gfns%3D1%26q%3DAdd%2Ba%2Bbookmark&title=Add+a+bookmark+-+Google+Search&zx=aKfYwQB3LIg" target="_blank"><img alt="Agregar a Google" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqBG2nWROk_IMLrHF9wJtZRh20f3MZ2a4_OiVvj8IurQ1-fbAY39h5qb8NvMB0Zeq7t8vd7ddJif-japSSQV45xdqpYi5tjGsTvtGCISVlvJnG2LwWsz5puyFczlm6KlQ1LpA/s1600/google.gif" /></a> <a href="http://meneame.net/submit.php?url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Meneame" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxK1yRtZYnnGyN3cSjbuS-x-kT_-OXOet4dGq9xdMYoMuv_9tV8GREH0olMtC23Ycm2YRL0S1fsjUqk9vgESAY8TEU7bDtyrqqzQsg7-eVW_efEU-Cxr576Xq36DuwIcYmvWtU/s1600/meneame.png" /></a> <a href="http://www.furl.net/storeIt.jsp?u=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Furl" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUlHEwT_v1nM393es2lt0u_w69N5E_DEX6LdbwiL4F-m8V6Bz5a83Om1DkiHytu7hUcNABVWSTxh_v6uYGxJIPOjPGshKPKos4ABHfh4oFA7gudUTUQ9aHuRZ0CyUfjQQLdnEN/s1600/furl.png" /></a> <a href="http://reddit.com/submit?url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Reddit" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8I_3Hl4Fd3iMIzQmPkXgxaNkSkWsypeVU3P8myfuEiAbgNftOo_mKQ4phPPaTKfnym7SG7llZBfJEHAxr4Zo-7RznZ2tKFKawfSzINVjH69tOuQp8FHYbn_5Y1-F-B3Ivwapi/s1600/reddit.gif" /></a> <a href="http://ma.gnolia.com/beta/bookmarklet/add?url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Magnolia" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_OsFBQTXtDg3hK00NhjC4S53uLCX4pDbvaWP5zkFXUPoMy3NicEd9vPI6bZ5Xx147nBF8XmeLRklGOMlQh0XlGmPPIvpiL3dTwBWAQdwBBouom1toJ5K6amtvJLianc61jdi/s1600/magnolia.gif" /></a> <a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Blinklist" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rl6qnmFAN58q6rJzUjydHvX6JlshwT4Qd0Xjt7CFb-7NtkTZWx_g-6GJm5yPfdj61oGS0yx69eE3cUrUX3kNqZ2Mfs_LisR0mlgrH3Bp4dRHU5CZXmLWiKPKtURABnGCZJtb/s1600/blinklists.gif" /></a> <a href="http://blogmarks.net/my/new.php?mini=1&simple=1&url=http://mundo-show.blogspot.com/2007/11/paula-nuestra-favorita.html&title=Paula%20Nuestra%20Favorita" target="_blank"><img alt="Agregar a Blogmarks" class="rsociales-sobre" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gHJP_Cg834xGszs2MxOpqoD_eNJV52He3-0zbA2m8FojBjcM3MlJWkLl7gUrPE-MIfA3Z7Fr3W314onOnJoKLRfYFGstlZ1mVazwKlGOgGlgTNNNbPKw77NrxRaWlyohOD3T/s1600/blogmarks.gif" /></a>
</center></legend>
Una vez guardados los cambios ese código nos aparecerá en todas las entradas, lo que haremos será escribir nuestra entrada como de costumbre dejando en el pie de la entrada los iconos de las Redes Sociales.
Si no deseamos ese enmarcado bastará con suprimir <legend> al principio y </legend> al final del código.
Para que esas imágenes tengan un efecto translucido y al pasar el ratón muestre el icono en su color real nos situaremos en la plantilla Edicción HTML y justo antes de ]]></b:skin> añadiremos
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}
El resultado sería algo así:
Al parecer Jackbook, en vista de los problemas para añadir las redes sociles a esta plantilla ha actualizado indicando la forma de hacerlo.
!Suerte¡
Y seguimos modificando la plantilla Red White esta vez le aplicaremos un dividers o barra separadora en las entradas.
Lo haremos marcando la casilla para expandir la plantilla de artilugios y buscando:
<b:include data='post' name='post'/>
Una vez lo localizamos justo después añadimos:
<input src="url-de-tu-imagen" type="image"/>
Miramos en vista previa y si todo está correcto guardamos los cambios.
Contratiempos... |
|
▼ |
"En casa de herrero cuchara de palo"
Dice un refrán de mi tierra, creo que todos habéis oído alguna vez.
No me canso nunca de repetir que hay que tener una copia de la plantilla por si alguna vez ocurre algo. Yo tenía no una, sino varias copias de mi plantilla pero pasó el tiempo y no tuve la precaución de hacer copia desde hace más o menos un año.
¿Qué ha pasado? no hice nada que no hiciera otras veces, aplicar en mi blog de pruebas una plantilla para intentar dar con un problema.
La plantilla es nueva, una maravilla de la que hablaré en otro momento, el caso que algo no encajaba bien y quise orientarme sobre mi propia plantilla, copié, pegué, modifiqué aquí y allá y miré en vista previa ... todo perfecto.
Luego quise dejar el blog de pruebas con la plantilla que suelo utilizar para hacer "experimentos" que suele ser la Minima así que la instalé de nuevo.
Guardar los cambios y darme cuenta que lo estaba haciendo en mi propia plantilla fue un instante. Mi rapidez no fue nada al lado de la de Blogger.
El resto ya podéis imaginarlo, quise recuperar la anterior pero no fue posible, para más inri mi PC esa tarde le dio por navegar lento, se bloqueaba. Tuve que agregar de nuevo la plantilla y naturalmente perdí todo menos las entradas, algunas cosillas de la sidebar también seguían existiendo yo creo que más por lástima que por otra cosa.
Pensé que si alguien accedía a mi blog probablemente intentaría seguir los pasos de algún ejemplo, o copiar algún código que ese momento no tendría utilidad. No tuve otra idea que cerrar el blog hasta solucionar el problema.
La sensación que más se acerca para describir ese momento fue desilusión, sabía que con paciencia y largas horas conseguiría dejar la plantilla como estaba.
Lo que no sabía es que los ángeles de la guarda siguen existiendo allá por Argentina y que les llaman J.Miur
No tardó en llegar a mi correo una copia de los archivos alojados a mi sidebar y otra de los CSS de la plantilla.
Con eso, y unas cuantas modificaciones en la plantilla lo que debería haber tardado un par de semanas ha quedado en dos días.
Cuento todo esto porque son muchos los emails que he recibido interesándose por lo que había pasado. Otros... solicitando invitación para acceder al blog.
He contestado uno a uno, pero desde aquí quiero daros las gracias a todos y en especial a J.Miur por su entrega a los demás en ayudar desinteresadamente.
Ahora solo me queda contestar los emails que tenía atrasados espero entendáis el motivo y agradezco vuestra paciencia.
Menú sidebar |
|
▼ |
Los diferentes menús que podemos aplicar a nuestro blog nos hace a veces estar indecisos a la hora de decidirnos.
Guti lo tiene muy claro, quiere un menú que ocupe poco espacio y ha visto uno en Dynamicdrive que le ha gustado.
Se trata de un menú lateral, queda oculto excepto una pestaña que al pasar el ratón sobre ella hace posible visionarlo al completo.
En estas imágenes se puede apreciar el efecto:
Para instalar el menú hay que descargar el archivo zip que Dynamicdrive proporciona.
El zip consta de dos archivos ssm.js y ssmItems.js lo que no, nos indica es dónde y cómo añadirlo a la plantilla así que vamos a ello.
Alojaremos en un servidor el archivo ssm.js una vez tengamos la url del archivo nos dirigimos a nuestra plantilla y justo antes de </head> añadimos lo siguiente:
<script src='url-del-archivo-ssm.js' type='text/javascript'/>
Luego abriremos el bloc de notas y buscaremos el archivo ssmItems.js que es el donde vamos a personalizar el menú.
Es ahí donde podemos sustituir a nuestro gusto los colores para personalizarlo y por supuesto el texto y los enlaces.
Una vez lo tengamos modificado guardamos de nuevo el archivo y lo alojamos en un servidor.
En la plantilla nos situamos en el lugar donde agregamos el archivo ssm.js y justo después agregamos el siguiente:
<script src='url-del-archivo-ssmItems.js'type='text/javascript'/>
Ya solo queda el último paso nos situamos antes de ]]></b:skin> para añadir lo siguiente:
.ssmItems:link {color:black;text-decoration:none;}
.ssmItems:hover {color:black;text-decoration:none;}
.ssmItems:active {color:black;text-decoration:none;}
.ssmItems:visited {color:black;text-decoration:none;}
Ya podemos mirar en vista previa antes de guardar los cambios.
DEEZER (Reproductor de música) |
|
▼ |
Hablando de reproductores hoy he descubierto DEEZER me gusta el aspecto del reproductor que ofrece es muy completo y de diseño elegante.
Ivoon ( Ipod para el blog) |
|
▼ |
¿Quién no tiene Ipod? si no lo tienes en casa ya puedes tenerlo en el blog con Ivoon puedes conseguirlo en tres sencillos pasos.
Clicaremos en Add donde indica la flecha para agregar canciones
Para que nuestro ipod no comience a sonar cada vez que cargamos la página bastará con NO marcar la casilla Auto Play antes de generar nuestro código.
Centrar iconos de navegación |
|
▼ |
De k_nelita me llega una consulta sobre los iconos de navegación, por si le sirve de ayuda a alguien más ahí va la pregunta y respuesta.
"no está muy mal, pero no quedan los botoncitos separados como los tuyos..."
No todas las plantilla son iguales eso todos lo sabemos, así que anteriormente a su comentario incluimos un añadido en la plantilla para situar las imágenes de los iconos en el lugar correspondiente IZQUIERDA-CENTRO-DERECHA
Ese añadido lo incluimos en los CSS, La plantilla es la Parchment de Blogcrowdsen buscamos donde añadirlo y lo hicimos justo antes de /* COMMENTS and TRACKBACKS
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}
Aún así los iconos de nuestra amiga se mostraban muy pegados entonces añadimos un margen entre ellos:
#blog-pager-older-link {
float: right;
margin: 0 0 2em 2em;
}
#blog-pager-newer-link {
float: left;
margin: 0 0 2em 2em;
}
#blog-pager {
text-align: center;
}
Y eso es todo !Suerte¡
Scroll con barra de color. |
|
▼ |
Hace tiempo me preguntaban como darle color a la barra de los Scroll estuve mirando la forma pero no lo conseguía, a mis manos llegó esta forma de hacerlo, pero no me convencía porque el efecto solo es visible en Explorer.
En vista que me lo volvieron a preguntar aquí está la solución.
Se trata de añadir un script en los CSS. A ese script le añadiremos los colores que se incorporarán a nuestro Scroll.
Añadiremos el script entre <head> y </head>
<style type='text/css'>
body {
scrollbar-arrow-color: aquí el color;
scrollbar-base-color: aquí el color;
scrollbar-dark-shadow-color:aquí el color;
scrollbar-track-color:aquí el color;
scrollbar-face-color:aquí el color;
scrollbar-shadow-color:aquí el color;
scrollbar-highlight-color:aquí el color;
scrollbar-3d-light-color:aquí el color;
}
</style>
Para que nos hagamos una idea de qué color representa cada parte del Scroll podéis mirar esta imagen:
El efecto varía según los colores, aquí una imagen de muestra:
Nuevas plantillas para Blogger ( Octubre 7, 07) |
|
▼ |
En total son 8 las nuevas plantillas que Blogger Templates añade a su lista.
Entre las plantillas me ha llamado la atención algunas de Wordpress adaptadas para Blogger por nuestro amigo Francisco de Blog and Web
Desde hace dos meses algunos ya están disfrutando la blogy-illacrimo por poner un ejemplo.
De todas formas aunque tarde bienvenidas son.
Esquinas redondeadas y color en la sidebar |
|
▼ |
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
En -moz-border-radius añadiremos la cantidad de acuerdo al efecto deseado en las esquinas, a menor cantidad más cerrado quedará el arco.
En solid escogeremos el tipo de borde y en #cc6666; podemos cambiar el color.
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
background:#cc9999;
Una vez finalizado quedaría algo así:
#sidebar-wrapper {
width: 180px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
background:#cc9999;
margin: 0 0 1px 0;
padding: 5px 5px 5px 22px;
float: right;
font-size: 10px; text-transform: uppercase;
word-wrap: break-word;
overflow: hidden;
}
Si en lugar de añadir color queremos añadir una imagen de fondo bastará con sustituir background:#cc9999; por background:url('url-de-tu-imagen');
Debo añadir que el efecto esquinas redondeadas no se visualiza con Explorer, en su lugar veremos líneas rectas.
Mi µ Stats ( widget, estadisticas) |
|
▼ |
Mi µ Stats, es un widget que nos muestra en forma de estadística el posicionamiento de nuestro blog en Google, Yahoo, Technorati, Alexa, Feedburner de nuestro blog.
Sin registro y solamente añadiendo la url de nuestro blog nos genera el código.
Fuente:Doktorgnomegang
Puricute (Composiciones divertidas para fotos) |
|
▼ |
Puericute es un espacio para chicos y grandes donde la imaginación es lo que cuenta.
En breves instantes podemos obtener una fotografía con efectos divertidos.
Una vez obtenido el código de nuestra composición lo podemos adaptar a nuestro blog modificando las medidas en height y width
Fuente: Cabalas Virtuales